<template>
    <div>
        <!--新增模板-->
        <el-form v-model="formObj">
          <el-form-item label="搜索条件" label-width="80px">
            <!--<el-transfer v-model="returnTable" :data="data"></el-transfer>-->
            <el-transfer v-model="formObj.searchList" :data="searchData" :titles="titles"></el-transfer>
          </el-form-item>

          <el-form-item label="操作条件" label-width="80px">
            <el-checkbox-group v-model="formObj.buttonList">
                <el-checkbox label="查询" border></el-checkbox>
                <el-checkbox label="新增" border></el-checkbox>
                <el-checkbox label="修改" border></el-checkbox>
                <el-checkbox label="删除" border></el-checkbox>
              </el-checkbox-group>
          </el-form-item>

          <el-form-item label="返回内容字段">
            <el-transfer v-model="formObj.returnList" :data="returnTable" :titles="titles"></el-transfer>
          </el-form-item>

          <el-form-item>
             <el-button type="primary" @click="addTemplate">保存</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  name: 'customTemplate',
  data() {
    const generateSearchData = _ => {
      var result = {
                     "success": true,
                     "errorCode": 0,
                     "payload":  [{"attr":"a","attrCn":"图片","type":"VARCHAR"},{"attr":"a's","attrCn":"视频","type":"VARCHAR"},{"attr":"a's'w","attrCn":"网站","type":"VARCHAR"}]
                 }
            const data = []
            result.payload.forEach((item) => {
                      data.push({
                         key: item.attr,
                         label: item.attrCn,
                         disabled: false
                       });
                   })
            return data;
          };
       const generateTableData = _ => {
             var result = {
                            "success": true,
                            "errorCode": 0,
                            "payload": [{"attr":"a","attrCn":"图片","type":"VARCHAR"},{"attr":"a's","attrCn":"视频","type":"VARCHAR"},{"attr":"a's'w","attrCn":"网站","type":"VARCHAR"}]
                        }
                   const data = []
                   result.payload.forEach((item) => {
                             data.push({
                                key: item.attr,
                                label: item.attrCn,
                                disabled: false
                              });
                          })
                   return data;
                 };
    return {
       searchData :generateSearchData(),
       searchList: [],
       returnTable : generateTableData(),
       returnList: [],
       titles:['备选字段','已选字段'],
       formObj:{
               searchList:[],
               buttonList: [],
               returnList:[]
             }
    };
  },
  watch:{

  },
  methods: {
    addTemplate(){
      console.log(JSON.stringify(this.formObj));
    }
  }
};
</script>
